<template>
    <div class="container">
        <div class="handle-box">
                <el-form ref="form" :model="form" label-width="90px" class="flex">
                    <el-form-item label="姓名：">
                        <el-input v-model="name" placeholder="请输入姓名" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="卡号：">
                        <el-input v-model="name" placeholder="请输入卡号" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：">
                        <el-input v-model="name" placeholder="请输入手机号" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="楼号：">
                        <el-input v-model="name" placeholder="请输入楼号" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="单元号：">
                        <el-input v-model="name" placeholder="请输入单元号" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="门牌号：">
                        <el-input v-model="name" placeholder="请输入门牌号" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="日期范围：">
                       <el-date-picker
                            v-model="value1"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search">搜索</el-button>
                        <el-button type="danger" icon="el-icon-circle-close">清空</el-button>
                        <el-button type="success" icon="el-icon-circle-plus-outline" @click="addlistdatadiglog()">新增</el-button>
                    </el-form-item>
                    
                </el-form>
            </div>
            <el-table
                :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"  :row-class-name="addindex"
            >
                <el-table-column prop="NAME" label="居民信息" width="80" align="center" ></el-table-column>
                <el-table-column prop='VID' label="居民ID" width="80" align="center"></el-table-column>
                <el-table-column prop="VILLAGE_NO" label="小区ID"></el-table-column>
                <el-table-column prop="SIMCARD_NO" label="卡号"></el-table-column>
                <el-table-column prop="sex" label="性别"></el-table-column>
                <el-table-column prop="IdNumber" label="身份证号"></el-table-column>
                <el-table-column prop="PHONE" label="联系电话"></el-table-column>
                <el-table-column prop="BUILDING" label="楼号"></el-table-column>
                <el-table-column prop="UNIT" label="单元"></el-table-column>
                <el-table-column prop="DOOR" label="门牌号"></el-table-column>
                <el-table-column prop="CREATE_DATE" label="注册日期"></el-table-column>
                <el-table-column prop="ISUSE" label="是否启用"></el-table-column>
                <el-table-column prop="PHOTO" label="照片"></el-table-column>
                <el-table-column prop="REMARK" label="备注"></el-table-column>
                <!-- <el-table-column v-for="item in integral" label="积分">
                {{item}}
                </el-table-column> -->
                <el-table-column prop="cardnumber" label="卡号"></el-table-column>
                <!-- <el-table-column prop="registrationdate" label="注册日期"></el-table-column> -->
                <el-table-column prop="state" label="状态"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button> |
                        <el-button
                            type="text"
                            @click="dellistdata(scope.row)" style="color:red"
                        >删除</el-button> |
                        <el-button
                            type="text"
                            @click="handle()" style="color:#2A47BD"
                        >积分管理</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page="currentPage"  
                    :page-size="pageSize"
                    :total="tableData.length"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
            <!-- 编辑弹出框 -->
            <el-dialog v-dialogDrag title="编辑" :visible.sync="editVisible" width="50%">
                <el-form ref="form" :model="form" label-width="70px" class="display">
                    <el-form-item label="居民姓名：" prop="name" :label-width="labelwidth" class="wid50">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="小区ID：" :label-width="labelwidth" class="wid50">
                         <el-cascader
                            v-model="form.villageno"
                            :options="options"
                            :show-all-levels="false"
                            ></el-cascader>
                    </el-form-item>
                    <el-form-item label="卡号：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="form.simcardno"></el-input>
                    </el-form-item>
                    <el-form-item label="性别：" :label-width="labelwidth" class="wid50">
                        <el-select v-model="form.sex" placeholder="请选择性别">
                          <el-option label="男" value="男"></el-option>
                          <el-option label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="身份证号：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="form.Idnumber"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="楼号：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="form.building"></el-input>
                    </el-form-item>
                    <el-form-item label="单元：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="form.unit"></el-input>
                    </el-form-item>
                    <el-form-item label="门牌号：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="form.door"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="注册日期：" :label-width="labelwidth" class="wid50"> -->
                        <!-- <el-date-picker
                          v-model="form.createdate"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker> -->
                    <!-- </el-form-item> -->
                    <el-form-item label="是否启用：" :label-width="labelwidth" class="wid50">
                        <el-select v-model="form.isuse" placeholder="请选择是否启用">
                          <el-option label="是" value="是"></el-option>
                          <el-option label="否" value="否"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="照片：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="form.photo"></el-input>
                        <!-- <el-upload
                          class="upload-demo"
                          action="https://jsonplaceholder.typicode.com/posts/"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          :file-list="fileList"
                          list-type="picture">
                          <el-button size="small" type="primary">点击上传</el-button>
                          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload> -->
                    </el-form-item>
                    <el-form-item label="备注：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="form.remark"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 新增弹出框 -->
             <el-dialog v-dialogDrag title="新增" :rules="rules" :visible.sync="addlistdatadiaglog" width="50%">
                <el-form ref="form" :model="ruleForm" label-width="70px" class="display">
                    <el-form-item label="居民姓名：" prop="name" :label-width="labelwidth" class="wid50">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="小区ID：" :label-width="labelwidth" class="wid50">
                         <el-cascader
                            v-model="ruleForm.villageno"
                            :options="options"
                            :show-all-levels="false"
                            ></el-cascader>
                    </el-form-item>
                    <el-form-item label="卡号：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="ruleForm.simcardno"></el-input>
                    </el-form-item>
                    <el-form-item label="性别：" :label-width="labelwidth" class="wid50">
                        <el-select v-model="ruleForm.sex" placeholder="请选择性别">
                          <el-option label="男" value="男"></el-option>
                          <el-option label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="身份证号：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="ruleForm.Idnumber"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="ruleForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="楼号：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="ruleForm.building"></el-input>
                    </el-form-item>
                    <el-form-item label="单元：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="ruleForm.unit"></el-input>
                    </el-form-item>
                    <el-form-item label="门牌号：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="ruleForm.door"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="注册日期：" :label-width="labelwidth" class="wid50">
                        <el-date-picker
                          v-model="ruleForm.createdate"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item> -->
                    <el-form-item label="是否启用：" :label-width="labelwidth" class="wid50">
                        <el-select v-model="ruleForm.isuse" placeholder="请选择是否启用">
                          <el-option label="是" value="是"></el-option>
                          <el-option label="否" value="否"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="照片：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="ruleForm.PHOTO" ></el-input>
                        <!-- <el-upload
                                class="avatar-uploader"
                                ref="upload"
                                :show-file-list="false"
                                action="/index/upload"
                                :before-upload="beforeUpload"
                                :on-change="handleChange"
                                :auto-upload="false"
                                :data="ruleForm">
                            <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload> -->
                    </el-form-item>
                    <el-form-item label="备注：" :label-width="labelwidth" class="wid50">
                        <el-input v-model="ruleForm.remark"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addlistdatadiaglog = false">取 消</el-button>
                    <el-button type="primary"  @click="addlistdata(ruleForm)">确 定</el-button>
                </span>
            </el-dialog>
        </div>
</template>
<script>
import '../../assets/css/common.css'

export default {
    data(){
        return{
            ruleForm: {
                name: '',
                imageUrl: '',
            },
            currentPage:1, //初始页
            pagesize:10,    //    每页的数据
            userList: [],
            address:'',
            name:'',
            value1: '',
            labelswidth: '160px',
            addlistdatadiaglog:false,
            form:{
                integral: '',
                score: '',
                remaining: '',
                chuyuintegral: '',
                chuyuscore: '',
                chuyuremaining: '',
                youhaiintegral:'',
                youhaiscore: '',
                youhairemaining: '',
                qitaintegral: '',
                qitascore: '',
                qitaremaining: ''
            },
            ruleForm:{
                name: '',
                villageno: '',
                simcardno: '',
                sex: '',
                Idnumber: '',
                phone: '',
                building: '',
                unit: '',
                door: '',
                createdate: '',
                isuse: '',
                imageUrl: '',
                remark: ''
            },
            rules: {
                name: [
                    // { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
            options: [],
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1,
            labelwidth: '120px'
        }
    },
    created() {
        // this.getData();
        this.getlistdata();
        this.loadCheckbox_SCV()
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        // getData() {
        //     fetchData(this.query).then(res => {
        //         console.log(res);
        //         this.tableData = res.list;
        //         this.pageTotal = res.pageTotal || 50;
        //     });
        // },
        // 触发搜索按钮
        // handleSearch() {
        //     this.$set(this.query, 'pageIndex', 1);
        //     // this.getData();
        // },
        createMiniQrcode (blob) {
      let img = document.createElement('img')
      img.onload = function (e) {
        // 元素的onload 事件触发后将销毁URL对象, 释放内存。
        window.URL.revokeObjectURL(img.src)
      }
      // 浏览器允许使用URL.createObjectURL()方法，针对 Blob 对象生成一个临时 URL。
      // 这个 URL 以blob://开头,表明对应一个 Blob 对象。
      img.src = window.URL.createObjectURL(blob)
      console.log(img)
      document.querySelector('.imgQrCode').appendChild(img)
    },
        async loadCheckbox_SCV () {
            var url =this.$url+'/GetGroupsApi?ClientNo='+localStorage.getItem('clentno');
            const { data } = await this.$axios.get(url)
            this.options = data.filter(item => {
              return item
        })
        },
        addlistdatadiglog(){
            this.addlistdatadiaglog = true;
        },
        addlistdata(formName){
            this.$axios({
                url: this.$url+'/AddPeopleApi',
                method: 'get',
                params: {
                    NAME: this.ruleForm.name,
                    VILLAGE_NO: this.ruleForm.villageno,
                    SIMCARD_NO: this.ruleForm.simcardno,
                    sex: this.ruleForm.sex,
                    IdNumber: this.ruleForm.Idnumber,
                    PHONE: this.ruleForm.phone,
                    BUILDING: this.ruleForm.building,
                    UNIT: this.ruleForm.unit,
                    DOOR: this.ruleForm.door,
                    CREATE_DATE: this.ruleForm.createdate,
                    ISUSE: this.ruleForm.isuse,
                    PHOTO: this.ruleForm.imageUrl,
                    REMARK: this.ruleForm.remark
                }
            }).then(res=>{
                    if(res.data.IsSucess){
                        this.getlistdata()
                        this.addlistdatadiaglog = false
                    }
                })
            console.log(this.ruleForm)
        },
         resetForm(formName) {
            this.$refs[formName].resetFields();
            this.ruleForm.imageUrl = '';
        },  
        handleChange (file, fileList) {
            this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
        },
 
        beforeUpload(file) {
            return true;
        },
        sucesslistdata(){
            this.addlistdatadiaglog == false
        },
        getlistdata(){
            
            this.$axios({
                url:this.$url+'/GetPeopleListApi',
                method:'get'
            }).then(res=>{
                console.log(res)
                if(res.status == '200'){
                    console.log(res.data)
                    this.tableData = res.data.filter(item=>{
                        return item
                        if(item){
                            this.createMiniQrcode(item.PHOTO)
                        }
                    })
                    // this.tableData == res.data
                }
            })
        },
        dellistdata(row){
            console.log(row.VID)
            this.$axios({
                url: this.$url+'/DeletePeopleApi',
                method:'get',
                params: {
                    VID:row.VID
                }
            }).then(res=>{
                if(res.data.IsSucess){
                    this.$message.success('删除成功');
                    this.getlistdata()
                }else{
                    this.$message.error('删除失败')
                }
            })
            // console.log(e.target.parentElement.parentElement.parentElement.parentElement)
        },
         mohu() {
            var search = this.name;
            console.log(search)
            var newdate = [];
            if(search){
                if(search)
                 this.tableData.filter(item=>{
                    if(item.name.indexOf(search) != -1){
                        newdate.push(item)
                    }
                })
            }else if (search == ''){
               this.getlistdata()
            }
            this.tableData = newdate
        },
        // 积分展示
        handle() {
           this.$router.push('/residentsintegral')
        },
        //编辑
        handleEdit(index, row) {
            this.idx = index;
            this.form = row;
            this.editVisible = true;
        },
        // handleDelete(index, row) {
        //     // 二次确认删除
        //     this.$confirm('确定要删除吗？', '提示', {
        //         type: 'warning'
        //     })
        //         .then(() => {
        //             this.$message.success('删除成功');
        //             this.tableData.splice(index, 1);
        //         })
        //         .catch(() => {});
        // },
        // 保存编辑
        // saveEdit() {
        //     this.editVisible = false;
        //     this.$message.success(`修改第 ${this.idx + 1} 行成功`);
        //     this.$set(this.tableData, this.idx, this.form);
        // },
        // 分页导航
        handlePageChange(currentPage) {
            this.currentPage = currentPage;
            // console.log(this.currentPage)
            // this.$set(this.query, 'pageIndex', val);
            // this.getData();
        },
        handleSizeChange(size){
            this.pagesize = size;
            console.log(this.pagesize)
        }
    }
}
</script>
<style scoped>
    .el-select{
        width: 100%;
    }
    .el-cascader--small{
        width: 100%;
    }
    .el-date-editor{
        width: 100%;
    }
</style>